<!doctype html>
<html lang="en">

<head>
    <title>瀑布流布局</title>
    <meta charset="utf-8" />
    <!-- <link type="text/css" rel="stylesheet" href="css/style.css" /> -->
    <!-- <script type="text/javascript" src="js/script.js"></script> -->
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #main {
            position: relative;
        }

        .pin {
            padding: 15px 0 0 15px;
            float: left;
        }

        .box {
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
        }

        .box img {
            width: 162px;
            height: auto;
        }
    </style>


</head>

<body>

        <div id="main">
                <div class="pin">
                    <div class="box">
                        <img src="./images/1.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/2.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/3.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/4.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/5.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/6.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/7.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/8.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/9.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/10.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/11.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/12.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/13.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/14.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/15.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/16.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/17.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/18.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/19.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/20.jpg"/>
                    </div>
                </div>
                <div class="pin">
                    <div class="box">
                        <img src="./images/21.jpg"/>
                    </div>
                </div>
            </div>

    <script>
        window.onload = function () {
            waterfall('main', 'pin');
          
        }
        // window.onresize=function(){
        //     waterfall('main', 'pin');

        //     }
        function waterfall(parent, box) {
            var oParent = document.getElementById(parent);
            var oBoxs = getByClass(oParent, box);
            // console.log(oBoxs);
            var heightArr = [];
            var iPinW = oBoxs[0].offsetWidth;
            // console.log(iPinW);
            var cols = Math.floor(document.documentElement.clientWidth / iPinW);
            // console.log(document.documentElement.clientWidth);
            // console.log(iPinW);
            // console.log(cols);
            oParent.style.cssText = 'width:' + iPinW * cols + 'px;margin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
            for (var i = 0; i < oBoxs.length; i++) {
                var imgHeight = oBoxs[i].offsetHeight;
                if (i < cols) {
                    // 将图片的高度值添加到数组中
                    heightArr[i] = imgHeight;
                } else {
                    // 求最小值和最小值的索引
                    var minHeight = Math.min.apply(null, heightArr);
                    // console.log(minHeight);
                    var minIndex = getMinhIndex(heightArr, minHeight)
                    // 计算及定义图片出现的位置
                    oBoxs[i].style.position = 'absolute';
                    oBoxs[i].style.top = minHeight + 'px';
                    // console.log(oBoxs[minIndex].offsetLeft)
                    oBoxs[i].style.left = oBoxs[minIndex].offsetLeft + 'px';

                    // 改变数组值
                    heightArr[minIndex] += oBoxs[i].offsetHeight;
                }

            }
            // console.log(heightArr);
        }
        function getByClass(parent, clsName) {
            var boxArr = new Array(),
                oElements = parent.getElementsByTagName('*');
            for (var i = 0; i < oElements.length; i++) {
                if (oElements[i].className == clsName) {
                    boxArr.push(oElements[i]);
                }
            }
            return boxArr;
        }

        // 求值在数组中的索引,arr接收的是数组，val接收的是判断的值
        function getMinhIndex(arr, val) {
            // var index = -1;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == val) {
                    return i;
                }
            }
            // return index;
        }
    </script>


</body>

</html>